<template>
	<view class="wait-container" :style="{ height: `${windowHeight}px` }">
		<z-paging ref="paging" v-model="waitList" @query="queryList">
			<template #top>
				<uni-nav-bar>
					<block slot="left">
					</block>
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input confirm-type="search" v-model="queryForm.content" class="nav-bar-input" type="text"
							placeholder="请输入内容" @confirm="confirm" />
					</view>
					<block slot="right">
						<view class="city" @click="search">
							搜索
						</view>
					</block>
				</uni-nav-bar>
			</template>
			<!-- <tabs :list="tabsList" @getTabs="getTabs" /> -->
			<scroll-view scroll-y="true" class="scroll-Y">

		<!-- 		<template #refresher="{refresherStatus}">
					<custom-refresher :status="refresherStatus" />
				</template> -->
				<!-- 自定义没有更多数据view -->
	<!-- 			<template #loadingMoreNoMore>
					<custom-nomore />
				</template> -->


				<view v-for="(item, index) in waitList" :key="index" class="scroll-view-item">
					<image class="scroll-image" src="@/static/images/wait/special.png"></image>
					<view class="describe">
						<view class="title-time">
							<view class="goal">{{ item.title }}</view>
							<view class="time">{{ item.createdAt }}</view>
						</view>
						<view class="desc-txt">{{ item.content }}</view>
					</view>
					<view class="navigate">
						<uni-icons type="right" size="30"></uni-icons>
					</view>
				</view>


			</scroll-view>
		</z-paging>
	</view>
</template>

<script>
	import widowHeightMixins from "@/mixins/widowHeightMixins.js";
	import tabs from "@/components/tabs/index";
	import {
		getTodo
	} from "@/api/home/index.js";
	import CustomRefresher from "@/components/custom-refresher/custom-refresher.vue"
	import CustomNoMore from "@/components/custom-nomore/custom-nomore.vue"
	export default {
		components: {
			tabs,
			CustomNoMore,
			CustomRefresher
		},
		mixins: [widowHeightMixins],
		data() {
			return {
				name: "待办",
				searchValue: "",
				tabsList: ["全部", "未完成(2)", "已完成"],
				queryForm: {
					pageNum: 1,
					pageSize: 10
				},
				waitList: [{
						type: 0,
						name: "安全目标",
						desc: "个人责任书模块中《2024年度安全环保责任书》需您去签订",
						time: "2024/02/22",
					},


				],
			};
		},
		methods: {
			getTabs(tab) {
				console.log(tab, "tab");
			},
			//搜索按钮
			search(res) {
				getTodo(this.queryForm).then((response) => {
					this.waitList = response.rows
				})

			},
			input(res) {
				console.log("----input:", res);
			},
			clear(res) {
				uni.showToast({
					title: "clear事件，清除值为：" + res.value,
					icon: "none",
				});
			},
			blur(res) {
				uni.showToast({
					title: "blur事件，输入值为：" + res.value,
					icon: "none",
				});
			},
			focus(e) {
				// uni.showToast({
				//   title: "focus事件，输出值为：" + e.value,
				//   icon: "none",
				// });
			},
			cancel(res) {
				uni.showToast({
					title: "点击取消，输入值为：" + res.value,
					icon: "none",
				});
			},
			//分页
			queryList(pageNum, pageSize) {
				this.queryForm.pageNum = pageNum
				this.queryForm.pageSize = pageSize
				getTodo(this.queryForm).then((res) => {
					// 将请求的结果数组传递给z-paging
					this.$refs.paging.complete(res.rows);
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false);
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},

		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.name,
			});
		},
	};
</script>

<style lang="scss" scoped>
	.wait-container {
		$nav-height: 30px;
		width: 100%;
		padding: 20rpx 12rpx;
		background: linear-gradient(to bottom,
				rgb(202, 231, 252) 0%,
				rgb(245, 248, 250) 100%);

		// tabs样式
		::v-deep {
			.scroll uni-view {
				width: 22%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #17233d;
				font-style: normal;
			}

			.scroll .active-item {
				border-bottom: 0px solid #000;
				font-family: PingFangSC, PingFang SC;
				font-weight: 800;
				font-size: 24rpx;
				color: #17233d;
			}
		}

		::v-deep {
			.uni-navbar {
				.uni-navbar--border {
					background-color: transparent !important;
					border-bottom: none !important;

					.uni-navbar__header {
						background-color: transparent !important;

						.uni-navbar__header-btns-left {
							width: 0 !important;
						}

						.uni-navbar__header-btns-right {
							.city {
								color: #137EE9;
								font-size: 18px;
								font-weight: 400;
							}
						}
					}
				}
			}
		}

		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}

		.input-uni-icon {
			line-height: $nav-height;
		}

		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}

		// tabs下面的描述列表
		.scroll-Y {

			// background-color: pink;
			.scroll-view-item {
				padding: 24rpx;
				margin-bottom: 24rpx;
				height: 164rpx;
				background: #ffffff;
				border-radius: 16rpx;
				display: flex;

				.scroll-image {
					width: 80rpx;
					height: 80rpx;
					margin-right: 26rpx;
				}

				.describe {
					width: 78%;
					margin-right: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-style: normal;

					.title-time {
						height: 50%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.goal {
							font-size: 26rpx;
							color: #17233d;
							line-height: 36rpx;
						}

						.time {
							font-size: 20rpx;
							color: #808695;
							line-height: 28rpx;
						}
					}

					.desc-txt {
						font-size: 24rpx;
						color: #808695;
						line-height: 34rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.navigate {
					.uni-icons {
						line-height: 130rpx;
						font-size: 36rpx !important;
						color: #dcdee2 !important;
					}
				}
			}
		}
	}
</style>